<template>
  <div class="fixed inset-x-0 top-3 z-[9999] pointer-events-none">
    <div class="container-fluid flex flex-col items-end gap-2">
      <TransitionGroup name="toast-fade" tag="div" class="space-y-2 w-full md:w-auto">
        <div v-for="t in toasts" :key="t.id" class="pointer-events-auto">
          <div :class="['toast', t.type]">
            <div class="flex items-center gap-2">
              <span class="dot" :class="t.type"></span>
              <span>{{ t.message }}</span>
            </div>
            <button class="x" @click="dismiss(t.id)" aria-label="关闭" title="关闭">×</button>
          </div>
        </div>
      </TransitionGroup>
    </div>
  </div>
</template>

<script setup>
import toast from '../composables/toast'
import { computed } from 'vue'
// 响应式获取全局 toast 列表，供 TransitionGroup 渲染
const toasts = computed(() => toast.toasts.value)
// 关闭指定 toast（通过 id）
const dismiss = toast.dismiss
</script>

<style scoped>
.toast{ @apply min-w-[240px] max-w-[92vw] md:max-w-md rounded-xl border px-4 py-2.5 text-sm shadow-glass bg-white/10 border-white/15 backdrop-blur-md text-white flex items-center justify-between; }
.toast.success{ @apply border-emerald-400/30; }
.toast.info{ @apply border-white/30; }
.toast.error{ @apply border-red-400/30; }
.toast .x{ @apply ml-4 text-white/60 hover:text-white/90; }
.toast .dot{ @apply inline-block w-2.5 h-2.5 rounded-full bg-white/60; }
.toast .dot.success{ @apply bg-emerald-400; }
.toast .dot.info{ @apply bg-white/70; }
.toast .dot.error{ @apply bg-red-400; }

.toast-fade-enter-from{ opacity: 0; transform: translateY(-6px); }
.toast-fade-enter-active{ transition: all .25s ease; }
.toast-fade-leave-to{ opacity: 0; transform: translateY(-6px); }
.toast-fade-leave-active{ transition: all .2s ease; }
</style>